<!DOCTYPE html>
<html lang="en">
<head>
	<!--
	author: Jiayuan
	subject: some simple webs
	purpose: improve my js skills
	introduction: spent about 12 hours to develop this project.
				   someone can click each of the three hrefs and it will perform a page different from the others.
					and my carousel can auto adapt to a picture with any size.
	-->
    <meta charset="UTF-8">
    <title>Title</title>
	<link rel="stylesheet" type="text/css" href="../css/DogSlight.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">  
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
	
	<style type="text/css">
		.nav-item{
			background-color: khaki;
			border-radius: 5px;
		}
	</style>
	
	<script>
		function exposure(){
			$('.carousel-control-prev').show();
			$('.carousel-control-next').show();
		}
		function hidethis(){			
			$('.carousel-control-prev').hide();
			$('.carousel-control-next').hide();
		}
		function load_myCarousel(){
			$('#myJumbortron').hide();
			$('#myBill').hide();
			$('#myCarousel').show();
		}
		function load_myJumbortron(){
			$('#myCarousel').hide();
			$('#myBill').hide();
			$('#myJumbortron').show();
		}
		function load_myBill(){
			$('#myCarousel').hide();
			$('#myJumbortron').hide();
			$('#myBill').show();
		}
	</script>

</head>
<body>
<div style="background-color: #cdc3ce">
<h1>&nbsp;Individual Such Webs</h1>
<ul class="nav nav-tabs">
    <li class="nav-item" style="left: 5px;position: relative;">
        <a class="nav-link" aria-current="page" onclick="load_myCarousel()">MyCarousel</a>
    </li>
	<li>&nbsp;&nbsp;&nbsp;</li>
    <li class="nav-item">
        <a class="nav-link"  onclick="load_myJumbortron()">MyJumbortron</a>
    </li>
	<li>&nbsp;&nbsp;</li>
    <li class="nav-item">
        <a class="nav-link" onclick="load_myBill()">MyBill</a>
    </li>
</ul>
</div>
<div id="myCarousel" class="carousel slide" style="width: 985px;height: 100px;left: 50%;transform: translate(-50%,50%)">
	<div id="carouselExampleIndicators" onmouseover="exposure()" onmouseout="hidethis()"  class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
		<div class="carousel-inner">
			<div class="carousel-item active">
				<img src="../img/dadminRights.jpg" class="d-block w-100" alt="...">
			</div>
			<div class="carousel-item">
				<img src="../img/messcodeWorkout.jpg" class="d-block w-100" alt="...">
			</div>
			<div class="carousel-item">
				<img src="../img/stackoverflowHire.jpg" class="d-block w-100" alt="...">
			</div>
		</div>
    <button class="carousel-control-prev" style="display: none;" type="button" data-target="#carouselExampleIndicators"  data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </button>
    <button class="carousel-control-next" style="display: none;" type="button" data-target="#carouselExampleIndicators"  data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </button>
	</div>
</div>

<div id="myJumbortron" style="display: none;">
	<div class="jumbotron jumbotron-fluid">
	  <div class="container">
	    <h1 class="display-4"align="center">DogSlight</h1>
		<div align="center">
			  <figure class="overlay-figure">
			  <div class="overlay-figure-content">
				<img src="../img/dogSlight.png">
				<div class="overlay-figure-background"></div>
			  </div>
			  <figcaption class="overlay-figure-caption">
				<div class="contents"> 
				  <div class="contents-stack">
					<h1 class="title">I'm Good Dog</h1>
					<div class="separator"></div>
					<p class="text"> U   C   W   C</p>
				  </div>
				</div>
			  </figcaption>
			</figure>
			<div style="text-align:center;clear:both">
			</div>
		</div>
	  </div>
	</div>	
</div>

<div id="myBill" class="container-fluid" style="display: none;">
	<div class="row-fluid">
		<div class="span12">
			<br><br><br>
			<h1 class="text-center"style="top: 200px;">我的记账本</h1>
		</div>
	</div>	
	<p><br><br></p>
	<div class="row" >
		<div class="col-lg-3">
		</div>
		<div class="col-lg-3" align="center">
			 <button onclick="btnjz()" class="btn btn-lg btn-info col-lg-4" type="button">记 账</button>
		</div>
		<div class="col-lg-3" align="right">
			 <button onclick="btntj()" class="btn btn-lg btn-info col-lg-4" type="button">统 计</button>
		</div>		
	</div>
	<br><br><br>
	<div class="row-fluid">
		<div class="span12">
			<table class="table table-hover table-condensed table-bordered">
				<thead>
					<tr style="background-color: bisque;">
						<th>日期</th>
						<th>收支</th>
						<th>事项</th>
						<th>金额</th>
					</tr>
				</thead>
				<tbody id="tbid">
				</tbody>
			</table>
			<br><br>
			<table class="table table-bordered">
				<thead>
					<tr>
						<th>收入合计</th>
						<th id="allget"></th>
					</tr>
					<tr>
						<th>支出合计</th>
						<th id="allput"></th>
					</tr>
					<tr>
						<th>余额</th>
						<th id="lastmoney"></th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
</div>

<!-- 此表单以dialog形式弹出 未能实现 -->
<div class="dialog" id="formjz" title="please put in" style="display: none;position: absolute;">
	<form>
		<input type="date" id="thedate" />
		<select id="iotype">
			<option value ="收入" >收入</option>
			<option value ="支出" selected="true">支出</option>
		</select>
		<input type="text" id="events" placeholder="事项" />
		<input type="text" id="costmoney" placeholder="金额"/>
		<input type="button" onclick="save()" value="保存"/>
	</form>
</div>
<script>
	function btnjz(){
		var op=$('#iotype option:selected');
		var left = ($(window).width() - $('#formjz').width())/2;
		var top  = ($(window).height() - $('#formjz').height())/2;
		$('#formjz').css({"top": top, "left": left, "display": "block"});
	};
	
	var j=0;
	function save(){
		var tableobj =document.getElementById('tbid');
		var trobj =document.createElement('tr');
		trobj.style.backgroundColor="blanchedalmond";
		var tdobj = document.createElement('td');
		for(var i=0;i<4;i++)
		{
		    var tdobj=document.createElement('td');
			tdobj.id=j++;
			if((tdobj.id)%4 == 0){	tdobj.innerHTML=document.getElementById('thedate').value;}
			if((tdobj.id)%4 == 1){	tdobj.innerHTML=document.getElementById('iotype').value;}
			if((tdobj.id)%4 == 2){	tdobj.innerHTML=document.getElementById('events').value;}
			if((tdobj.id)%4 == 3){	tdobj.innerHTML=document.getElementById('costmoney').value;}
		    trobj.appendChild(tdobj);
		}
		trobj.appendChild(tdobj);
		tableobj.appendChild(trobj);
		$('#iotype').val("支出");
		$('#events').val("");
		$('#costmoney').val("");
	}
	
	function btntj(){
		$('#formjz').hide();
		var tableobj =document.getElementById('tbid');
		var add_sum=0;
		var sub_sum=0;
		var cost_no='3';
		var type_no='1';
		for(var k=0;k<tableobj.rows.length;k++){
			cost=document.getElementById(cost_no).innerHTML;
			type=document.getElementById(type_no).innerHTML;
			if(type=='收入'){
				add_sum=Number(add_sum)+Number(cost);
			}else{
				sub_sum=Number(sub_sum)+Number(cost);
			}
			cost_no=String(Number(cost_no)+4);
			type_no=String(Number(type_no)+4);
		}
		document.getElementById('allget').innerHTML=add_sum;
		document.getElementById('allput').innerHTML=sub_sum;
		document.getElementById('lastmoney').innerHTML=add_sum-sub_sum;	
	}
</script>

</body>
</html>